<template>
  <div class="about">
    <h1>This is an about page</h1>
    <hr>
    <h2>state.counter: {{ counter }}</h2>
    <!-- <h3>state.counter: {{ counter1 }}</h3>-->
    <button @click="counterAdd">commit mutation update counter</button>
    <button @click="counterAddAct">dispatch action update counter</button>
    <!-- <button @click="$store.state.counter++">state.counter++</button>-->
    <h3>counter100: {{counter100}}</h3>
    <hr>
    <h2>{{ msg }}</h2>
    <button @click="reversedMsg">翻转vuex msg</button>
    <hr>
    <h3>{{now}}</h3>
    <ul>
      <li
          v-for="item of list"
          :key="item.id"
      >
        {{ item.text }}
      </li>
    </ul>
    <pre>
      {{filterList}}
    </pre>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['counter', 'msg', 'list']),
    ...mapGetters(['counter100', 'filterList']),
    now() {
      return new Date()
    },
  },
  /*
  computed: mapState(['counter', 'msg', 'list']),
  computed: mapState({
    // 箭头函数可使代码更简练
    // counter: (state) => state.counter,
    counter: 'counter',
    // 'counter' <===> (state) => state.counter
    counter1: 'counter',
    // 状态别名: '状态'
  }),
  computed: {
    now() {
      return new Date()
    },
    counter100() {
      return this.$store.getters.counter100
    },
    counter() {
      return this.$store.state.counter
    },
    msg() {
      return this.$store.state.msg
    },
    list() {
      return this.$store.state.list
    }
  },*/
  methods: {
    ...mapMutations(['UPDATE_COUNTER']),
    ...mapActions(['setMsgAction', 'setCounterAction']),
    reversedMsg() {
      // this.$store.commit('setMsg')
      // console.log(this.$store)
      // this.$store.dispatch('setMsgAction')
      this.setMsgAction()
    },
    counterAdd() {
      // console.log(this.$store)
      // this.$store.commit('UPDATE_COUNTER')
      this.UPDATE_COUNTER()
    },
    counterAddAct() {
      // this.$store.dispatch('setCounterAction')
      this.setCounterAction()
    }
  }
}
</script>
